<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 215px;
				height: 441px;
				padding: 50px;
				background: #333;
				border: 5px solid gold;
				
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 1.什么是CSS盒子模型?
		 CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
		 结论
		 在HTML中所有的标签都可以设置
		 宽度/高度 == 指定可以存放内容的区域
		 内边距 == 填充物
		 边框 == 手机盒子自己
		 外边距 == 盒子和盒子之间的间隙
		 
		 2、盒子模型的宽度和高度
		 2-1.内容的宽度和高度
		 就是通过width/height属性设置的宽度和高度
		 2-2.元素的宽度和高度
		 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
		 高度 = 上边框 + 上内边距 + width + 下内边距 + 下边框
		 
		 -->
		 
		 <div>
			 <img src="img/iphone.PNG" alt="">		 	
		 </div>
		 
		 <div>
		 	<img src="img/iphone.PNG" alt="">		 	
		 </div>
	</body>
</html>
